<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>增删改查</title>
    <script type="text/javascript" src="../../../jquery.js"></script>
    <script src="../../../ui/om-core.js"></script>
    <script src="../../../ui/om-validate.js"></script>
    <script src="../../../ui/om-mouse.js"></script>
    <script src="../../../ui/om-draggable.js"></script>
    <script src="../../../ui/om-position.js"></script>
    <script src="../../../ui/om-resizable.js"></script>
    <script type="text/javascript" src="../../../ui/om-grid.js"></script>
    <script src="../../../ui/om-button.js"></script>
    <script src="../../../ui/om-dialog.js"></script>
    <script src="../../../ui/om-ajaxsubmit.js"></script>
    <script src="../../../ui/om-messagetip.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../themes/default/om-all.css" />
    <link rel="stylesheet" href="../../../demos/common/css/demo.css">
    <style>
        #delete{margin-right:20px;}
        #ipForm label {color:red;}
    </style>
    <!-- view_source_begin -->
    <script type="text/javascript">
        $(document).ready(function() {
            $('#grid').omGrid({
                dataSource : '../../../gridauthority.do',
                width : 686,
                height : 332,
                limit : 10,
                colModel : [ {header : '菜单ID', name : 'catalogId', width : 90, align : 'center'}, 
                             {header : '菜单名称', name : 'catalogName', width : 'autoExpand', align : 'left'}, 
                             {header : '新增', name : 'authority', align : 'center', width : 100 , renderer : authorityadd},
                             {header : '修改', name : 'authority', align : 'center', width : 100 , renderer : authoritymod},
                             {header : '删除', name : 'authority', align : 'center', width : 100 , renderer : authoritydel},
                             ],
                //当单击checkbox时阻止事件冒泡，这样不会选中checkbox所在的行
                onRefresh : function(){
                    $('#grid').find("input:checkbox").click(function(event){
                        event.stopPropagation();
                    });
                }             
            });
            
            function authorityadd(colValue, rowData, rowIndex)
            {
            	if(colValue.indexOf('add') != -1){
            		$('#authrity_all').val($('#authrity_all').val()+','+rowData.catalogId+'_add'); //设置初始值
            		return '<input type="checkbox" id="'+rowData.catalogId+'_add" checked="checked" onclick="check(this)"></input>';
            	}
            	return '<input type="checkbox" id="'+rowData.catalogId+'_add" onclick="check(this)"></input>';
            }
            function authoritymod(colValue, rowData, rowIndex)
            {
            	if(colValue.indexOf('mod') != -1){
            		$('#authrity_all').val($('#authrity_all').val()+','+rowData.catalogId+'_mod'); //设置初始值
            		return '<input type="checkbox" id="'+rowData.catalogId+'_mod" checked="checked" onclick="check(this)"></input>';
            	}
            	return '<input type="checkbox" id="'+rowData.catalogId+'_mod" onclick="check(this)"></input>';
            }
            function authoritydel(colValue, rowData, rowIndex)
            {
            	if(colValue.indexOf('del') != -1){
            		$('#authrity_all').val($('#authrity_all').val()+','+rowData.catalogId+'_del'); //设置初始值
            		return '<input type="checkbox" id="'+rowData.catalogId+'_del" checked="checked" onclick="check(this)"></input>';
            	}
            	return '<input type="checkbox" id="'+rowData.catalogId+'_del" onclick="check(this)"></input>';
            }
            
            $('#submitAuth').click(function(){
                var val = $('#authrity_all').val();
                if(val && val[0]===","){
                    val = val.slice(1);
                }
            	alert(val);
            });
            
        });
        function check(obj){
        	var oldv = $('#authrity_all').val();
        	if(obj.checked){
        		$('#authrity_all').val(oldv+','+obj.id);
        	}else{
        		$('#authrity_all').val(oldv.replace(','+obj.id,''));
        	}
        }
    </script>
    <!-- view_source_end -->
</head>
<body>
    <!-- view_source_begin -->
    <input type="button" id="submitAuth" value="提 交"></input>
    <table id="grid"></table>
    <input type="hidden" id="authrity_all" />
    <!-- view_source_end -->
    <div id="view-desc">
        <p>此示例适合设置权限的时候使用,隐藏域的数据结构根据后台的保存方式改变。</p>
    </div>
</body>
<script type="text/javascript" src="../../../demos/common/js/themeloader.js"></script>
</html>